<template>
  <div>
		<van-nav-bar  title="申请技师" left-arrow @click-left="$utils.back($route.path)" />
		<div class="register-form pd-24 mg-24 bg-white">
      <van-cell-group class="apply_main fs-32">
				<van-field
					class="fs-32"
					v-model="model.name.value"
					required
					clearable
					:label="model.name.label"
					placeholder="请输入您的真实姓名"
				/>
				<van-field
					class="fs-32"
					v-model="model.tel.value"
					required
					clearable
					:label="model.tel.label"
					placeholder="请输入手机号码"
				/>
				<van-field
					class="fs-32"
					v-model="model.identityNumber.value"
					required
					clearable
					:label="model.identityNumber.label"
					placeholder="请输入身份证号码"
				/>
				
				<van-field required label="性别" class="fs-32">
            <template #input>
							<van-radio-group v-model="model.sex.value" class="flex">
								<van-radio name="1" class="mr-24 fs-28" checked-color="#24c373">男</van-radio>
								<van-radio name="2" class="fs-28" checked-color="#24c373" >女</van-radio>
							</van-radio-group>
            </template>
        </van-field>				
				<div class="project mr-24 pb-24">
					<div class="apply_title left-star" >简介</div>
					<van-field v-model="model.selfIntroduce.value" type="textarea" class="pl-10 fs-32 mt-15 remark" placeholder="请在此处输入个人简介" />
				</div>
				<div class="project mr-24 pb-24">
					<div class="apply_title left-star">可服务项目</div>
					<van-field v-model="model.serviceProject.value" type="textarea" class="pl-10 fs-32 mt-15 remark" placeholder="请输入可服务项目" />
				</div>
				<div class="project mr-24 pb-24">
					<div class="apply_title left-star">身份证正反面照</div>
					<van-cell class="ptb-20 pr-30">
						<van-uploader
							slot="title"
							v-model="identCardImages"
							class="advertPictures"
							:after-read="(file)=>{afterRead(file,'identCardImages')}"
							preview-size="2rem"
							@delete="(file,detail)=>{afterDelete(file,detail,'identCardImages')}"
						/>
					</van-cell>
				</div>
				<div class="project mr-24 pb-24">
					<div class="apply_title left-star">本人近期照</div>
					<van-cell class="ptb-20 pr-30">
						<van-uploader
							slot="title"
							v-model="photo"
							class="advertPictures"
							:after-read="(file)=>{afterRead(file,'photo')}"
							preview-size="2rem"
							@delete="(file,detail)=>{afterDelete(file,detail,'photo')}"
						/>
					</van-cell>
				</div>			
				<div class="project mr-24 pb-24">
					<div class="apply_title left-star">资质证件</div>
					<van-cell class="ptb-20 pr-30">
						<van-uploader
							slot="title"
							v-model="certificates"
							class="advertPictures"
							:after-read="(file)=>{afterRead(file,'certificates')}"
							preview-size="2rem"
							@delete="(file,detail)=>{afterDelete(file,detail,'certificates')}"
						/>
					</van-cell>
				</div>					
			</van-cell-group>
		</div>
		<div class="mtb-30 plr-40 ptb-16 bg-white" v-if="model.ID === 0 || model.state === 5">
      <van-button  size="large" class="bg-physio-primary1 color-white br-44" @click="submit">提交申请</van-button>
    </div>
	</div>
</template>
<script>
import { upLoad } from 'api/upload'
import { AddOrEditArtificer,GetArtificerInfo } from 'api/physio'

export default {
	data() {
    return {
      avar: [],
      photo: [],
      certificates: [],
			identCardImages: [],
      model: {       
        name: {
          label: '姓名',
          value: '',
          require: true,
          requireMessage: '请输入您的真实姓名'
        },
        tel: {
          label: '手机号',
          value: '',
          require: true,
          requireMessage: '请输入手机号码',
					pattern: /^1[3456789]\d{9}$/,
          patternMessage: '请输入正确的手机号'
        },
        identityNumber: {
          label: '身份证号',
          value: '',
          require: true,
          requireMessage: '请输入身份证号码',
					pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
          patternMessage: '身份证号码格式有误'
        },
				sex: {
          label: '性别',
          value: '2',
          require: true,
					requireMessage: '请选择性别'
        },				
        
        photo: {
          label: '近期照',
          value: [],
          minLength: 1,
          minLengthMessage: '请至少上传一张近期照'
        },
				certificates: {
          label: '资质证书',
          value: [],
          minLength: 1,
          minLengthMessage: '请至少上传一张资质证书'
        },
				identCardImages:{
					label: '身份证照片',
          value: [],
          minLength: 1,
          minLengthMessage: '请上传身份证正反面'
				},
        selfIntroduce: {
          label: '简介',
          value: '',
					require: true,
        },
				serviceProject: {
          label: '可服务项目',
          value: '',
					require: true,
        },        
				invitStoreId: 0,
      },   
			state: 0, //状态 0未审核 5已驳回
			ID: 0, //技师id(默认为0,提交申请之后生成一个)   
      sortList: [],
      identify: {
        // 随机产生验证码的字符串
        identifyCodes: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ',
        identifyCode: ''
      }
    }
  },
	created(){
		this.GetArtificerInfo();
		
	},
	methods: {
		GetArtificerInfo(){
			GetArtificerInfo().then(res => {
				if(res){
					const data = res.Data
					const _model = this.model
					_model.name.value = data.Name
					_model.tel.value = data.Tel
					_model.identityNumber.value = data.IdentityNumber
					_model.selfIntroduce.value = data.SelfIntroduce
					_model.serviceProject.value = data.ServiceProject
					_model.invitStoreId = data.InvitStoreId
					if(data.Sex != 0){					
						_model.sex.value = data.Sex +''			
					}	
					if(this.$route.query.InvitStoreId){			
						this.model.invitStoreId = this.$route.query.InvitStoreId
					}
					if (res.Data.Photo) {
						res.Data.Photo = res.Data.Photo.split(',')
						for (let i = 0, len = res.Data.Photo.length; i < len; i++) {
							if(res.Data.Photo[i] != ''){
								this.photo.push({
									url: this.$webInfo.ImgDomain + res.Data.Photo[i]
								})
							}           
						}
						this.model.photo.value = res.Data.Photo
					}					
					if (res.Data.Certificates) {
						res.Data.Certificates = res.Data.Certificates.split(',')
						for (let i = 0, len = res.Data.Certificates.length; i < len; i++) {
							if(res.Data.Certificates[i] != ''){
								this.certificates.push({
									url: this.$webInfo.ImgDomain + res.Data.Certificates[i]
								})
							}          
						}
						this.model.certificates.value = res.Data.Certificates
					}
					if (res.Data.IdentCardImages) {
						res.Data.IdentCardImages = res.Data.IdentCardImages.split(',')
						for (let i = 0, len = res.Data.IdentCardImages.length; i < len; i++) {
							if(res.Data.IdentCardImages[i] != ''){
								this.identCardImages.push({
									url: this.$webInfo.ImgDomain + res.Data.IdentCardImages[i]
								})
							}
						}
						this.model.identCardImages.value = res.Data.IdentCardImages
					}
					_model.ID = data.ID
					_model.state = data.State
				
				}
			})
		},
    afterRead(file, type) {
      if (file.length) {
        for (let i = 0, len = file.length; i < len; i++) {
          upLoad({
            Content: this.$utils.getCaption(file[i].content, 'base64,'),
            FileType: this.$utils.getCaption(file[i].file.type, '/')
          }).then(res => {					
            if (res) {
              if (type == 'photo') {
                this.model.photo.value.push(res.Data.Path)
              } else if (type == 'certificates') {
                this.model.certificates.value.push(res.Data.Path)
              }else if (type == 'identCardImages') {
                this.model.identCardImages.value.push(res.Data.Path)
              }
            }
          })
        }
      } else {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res) {
            if (type == 'photo') {
              this.model.photo.value.push(res.Data.Path)
            } else if (type == 'certificates') {
              this.model.certificates.value.push(res.Data.Path)
            }else if (type == 'identCardImages') {
              this.model.identCardImages.value.push(res.Data.Path)
            }
          }
        })
      }
    },
		afterDelete(file, detail, type) {
			if (type == 'photo') {
				this.model.photo.value.splice(detail.index, 1)
      } else if (type == 'certificates') {				
				this.model.certificates.value.splice(detail.index, 1)
      }else if (type == 'identCardImages') {				
				this.model.identCardImages.value.splice(detail.index, 1)
      }      
			console.log(this.model.photo,"近期照")
    },
    
    // 验证码部分start
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identify.identifyCode = ''
      this.makeCode(this.identify.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identify.identifyCode += this.identify.identifyCodes[this.randomNum(0, this.identify.identifyCodes.length)]
      }
    },
    // 验证码部分end
    // 保存地图详细地址
    confirmAmap(dataModel) {
      //console.log(this.model);
    },
    // 选择商家类型
    //onConfirm(item) {
    //  this.model.bussinessType.value = item.text
    //  this.model.bussinessType.id = item.value
    //  this.showBussinessType = false
    //},
    // 营业时间选择
    TimeSelect(item, type) {
      if (type == 'start') {
        this.model.startTime.value = item
        this.startTime = false
      } else {
        this.model.endTime.value = item
        this.endTime = false
      }
    },
    // 商区选择
    areaSelect(item) {
      //console.log(item);
      if (this.model.area.AreaId != item[2].code) {
        if (item[2].code) {
          this.model.area.value = item[0].name + '-' + item[1].name + '-' + item[2].name
        } else {
          this.model.area.value = item[0].name + '-' + item[1].name
        }
        this.model.area.ProvinceName = item[0].name
        this.model.area.ProvinceId = item[0].code
        this.model.area.CityName = item[1].name
        this.model.area.CityId = item[1].code
        this.model.area.AreaName = item[2].name
        this.model.area.AreaId = item[2].code
        this.model.address.value = ''
      }
      this.showArea = false
    },
    getStoreCategoryTreeList() {
      getStoreCategoryTreeList(0).then(res => {
        //console.log(res);
        if (res) {
          for (let i = 0, len = res.Data.length; i < len; i++) {
            this.sortList.push({
              text: res.Data[i].CategoryName,
              value: res.Data[i].Id
            })
          }
          this.getInfo()
        }
      })
    },
    submit() {
      let self = this
			console.log(self.model,"提交申请")
      // 表单验证
      if (self.$utils.formValidate(self.model).valid) {					
          AddOrEditArtificer(self.model).then(res => {
            if (res) {
              this.$toast({
                type: 'success',
                message: '已提交申请审核',
                forbidClick: true,
                onClose: function() {
                  self.$router.back()
                }
              })
							window.location.href = this.$LocalDomain + '/m/home/union'
            }
          })       
      } else {
        this.$toast(self.$utils.formValidate(self.model).msg)
      }
    },
    // 获取商家资料
    getInfo() {
      getInfo().then(res => {
        //console.log(res);
        if (res) {
          if (res.Data.Logo) {
            this.avar.push({
              url: this.$webInfo.ImgDomain + res.Data.Logo
            })
            this.model.logo.value = res.Data.Logo
          }
          this.model.storeName.value = res.Data.StoreName
          if (res.Data.photo) {
            res.Data.photo = res.Data.photo.split(',')
            for (let i = 0, len = res.Data.photo.length; i < len; i++) {
              this.photo.push({
                url: this.$webInfo.ImgDomain + res.Data.photo[i]
              })
            }
            this.model.photo.value = res.Data.photo
          }
          this.model.storeExplain.value = res.Data.StoreExplain
          this.model.phone.value = res.Data.ContactTel
          this.model.concactName.value = res.Data.ContactName
          if (res.Data.ProvinceId) {
            this.model.area.value = res.Data.ProvinceName + '-' + res.Data.CityName + '-' + res.Data.AreaName
            this.model.area.ProvinceName = res.Data.ProvinceName
            this.model.area.ProvinceId = res.Data.ProvinceId
            this.model.area.CityName = res.Data.CityName
            this.model.area.CityId = res.Data.CityId
            this.model.area.AreaName = res.Data.AreaName
            this.model.area.AreaId = res.Data.AreaId
          }
          this.model.address.value = res.Data.ContactAddress
          this.model.Lng.value = res.Data.Lng
          this.model.Lat.value = res.Data.Lat
          this.model.addressDesc.value = res.Data.AddressDescription
          this.model.startTime.value = res.Data.BusinessHours.split('-')[0]
          this.model.endTime.value = res.Data.BusinessHours.split('-')[1]
          if (res.Data.certificates) {
            res.Data.certificates = res.Data.certificates.split(',')
            for (let i = 0, len = res.Data.certificates.length; i < len; i++) {
              this.certificates.push({
                url: this.$webInfo.ImgDomain + res.Data.certificates[i]
              })
            }
            this.model.certificates.value = res.Data.certificates
          }
          this.model.description.value = res.Data.Description
        }
				if (res.Data.identCardImages) {
          res.Data.identCardImages = res.Data.identCardImages.split(',')
          for (let i = 0, len = res.Data.identCardImages.length; i < len; i++) {
            this.identCardImages.push({
              url: this.$webInfo.ImgDomain + res.Data.identCardImages[i]
            })
          }
          this.model.identCardImages.value = res.Data.identCardImages
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
	.remark{
		background: #f7f7f7;
		padding-left: 32px !important;
	}	
	.project{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-bottom: 1px solid #ebedf0;
		margin-left: 10px;
	}
	.apply_title{
		margin: 20px 0 0 5px;
		font-size: 32px;		
		position: relative;
	}
	.project:last-child{
		border-bottom: none;
	}
	[class*=van-hairline]::after {
  	border: none;
	}
	.project{
		.van-cell{
			padding-left: 0;
		}
	}
	.left-star{
		padding-left: 15px;
		&::before{
			content: "*";
			color: #FF0202;
			position: absolute;
			font-size: 28px;
			top: 5px;
			left: 0;
		}
	}


</style>
